<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col class="card-box hostres_wrap">
        <el-card>
          <template #header><span>网络故障注入</span></template>
          <el-form label-width="120px" :rules="networkRules">
            <el-form-item label="主机地址" prop="ip" style="width: 20%">
              <el-select
                v-model="selectIP"
                placeholder="请选择主机地址"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) in ip_list"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <el-tabs type="border-card">
            <el-tab-pane label="网络延迟故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkDelayFormRef"
                    :model="networkDelayForm"
                    :rules="networkDelayRules"
                  >
                    <el-form-item label="目标IP" prop="destinationIp">
                      <el-input
                        v-model="networkDelayForm.destinationIp"
                        placeholder="例如：192.168.1.0"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除端口" prop="excludePort">
                      <el-input
                        v-model="networkDelayForm.excludePort"
                        placeholder="例如：22,8000 或者 8000-8010"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除IP" prop="excludeIp">
                      <el-input
                        v-model="networkDelayForm.excludeIp"
                        placeholder="例如：192.168.1.1"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="网卡设备" prop="networkCard">
                      <el-select
                        v-model="networkDelayForm.networkCard"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in interface_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="本地端口" prop="localPort">
                      <el-input
                        v-model="networkDelayForm.localPort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间浮动值(ms)" prop="offset">
                      <el-input v-model="networkDelayForm.offset" clearable />
                    </el-form-item>
                    <el-form-item label="远程端口" prop="remotePort">
                      <el-input
                        v-model="networkDelayForm.remotePort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间(ms)" prop="time">
                      <el-input v-model="networkDelayForm.time" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkDelayForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData(
                            'networkDelayFormRef',
                            networkDelayForm,
                            1
                          )
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="篡改DNS域名解析">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkDnsFormRef"
                    :model="networkDnsForm"
                    :rules="networkDnsRules"
                  >
                    <el-form-item label="域名" prop="domain">
                      <el-input v-model="networkDnsForm.domain" clearable />
                    </el-form-item>
                    <el-form-item label="映射IP" prop="mappingIp">
                      <el-input v-model="networkDnsForm.mappingIp" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkDnsForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData('networkDnsFormRef', networkDnsForm, 2)
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="网络丢包故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkLossFormRef"
                    :model="networkLossForm"
                    :rules="networkLossRules"
                  >
                    <el-form-item label="目标IP" prop="destinationIp">
                      <el-input
                        v-model="networkLossForm.destinationIp"
                        placeholder="例如：192.168.1.0"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除端口" prop="excludePort">
                      <el-input
                        v-model="networkLossForm.excludePort"
                        placeholder="例如：22,8000 或者 8000-8010"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除IP" prop="excludeIp">
                      <el-input
                        v-model="networkLossForm.excludeIp"
                        placeholder="例如：192.168.1.1"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="网卡设备" prop="networkCard">
                      <el-select
                        v-model="networkLossForm.networkCard"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in interface_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="本地端口" prop="localPort">
                      <el-input
                        v-model="networkLossForm.localPort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="远程端口" prop="remotePort">
                      <el-input
                        v-model="networkLossForm.remotePort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="丢包百分比" prop="percent">
                      <!-- <el-input
                        v-model="networkLossForm.percent"
                        placeholder="取值在[0, 100]的正整数 "
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="networkLossForm.percent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间(ms)" prop="time">
                      <el-input v-model="networkLossForm.time" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkLossForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData('networkLossFormRef', networkLossForm, 3)
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="网络包损坏故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkCorruptFormRef"
                    :model="networkCorruptForm"
                    :rules="networkCorruptRules"
                  >
                    <el-form-item label="目标IP" prop="destinationIp">
                      <el-input
                        v-model="networkCorruptForm.destinationIp"
                        placeholder="例如：192.168.1.0"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除端口" prop="excludePort">
                      <el-input
                        v-model="networkCorruptForm.excludePort"
                        placeholder="例如：22,8000 或者 8000-8010"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除IP" prop="excludeIp">
                      <el-input
                        v-model="networkCorruptForm.excludeIp"
                        placeholder="例如：192.168.1.1"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="网卡设备" prop="networkCard">
                      <el-select
                        v-model="networkCorruptForm.networkCard"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in interface_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="本地端口" prop="localPort">
                      <el-input
                        v-model="networkCorruptForm.localPort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间浮动值(ms)" prop="offset">
                      <el-input v-model="networkCorruptForm.offset" clearable />
                    </el-form-item>
                    <el-form-item label="包损坏百分比" prop="percent">
                      <!-- <el-input
                        v-model="networkCorruptForm.percent"
                        placeholder="取值在[0, 100]的正整数 "
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="networkCorruptForm.percent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="远程端口" prop="remotePort">
                      <el-input
                        v-model="networkCorruptForm.remotePort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkCorruptForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData(
                            'networkCorruptFormRef',
                            networkCorruptForm,
                            4
                          )
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="网络包乱序故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkReorderFormRef"
                    :model="networkReorderForm"
                    :rules="networkReorderRules"
                  >
                    <el-form-item label="目标IP" prop="destinationIp">
                      <el-input
                        v-model="networkReorderForm.destinationIp"
                        placeholder="例如：192.168.1.0"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除端口" prop="excludePort">
                      <el-input
                        v-model="networkReorderForm.excludePort"
                        placeholder="例如：22,8000 或者 8000-8010"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除IP" prop="excludeIp">
                      <el-input
                        v-model="networkReorderForm.excludeIp"
                        placeholder="例如：192.168.1.1"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="网卡设备" prop="networkCard">
                      <el-select
                        v-model="networkReorderForm.networkCard"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in interface_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="本地端口" prop="localPort">
                      <el-input
                        v-model="networkReorderForm.localPort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="包序列大小" prop="gap">
                      <!-- <el-input
                        v-model="networkReorderForm.gap"
                        placeholder="取值是正整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="0"
                        :max="100"
                        v-model="networkReorderForm.gap"
                        clearable
                      />
                    </el-form-item>

                    <el-form-item label="远程端口" prop="remotePort">
                      <el-input
                        v-model="networkReorderForm.remotePort"
                        placeholder="例如 80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="和上一包相关性" prop="correlation">
                      <!-- <el-input
                        v-model="networkReorderForm.correlation"
                        placeholder="取值范围：0~100"
                        clearable
                      /> -->
                      <el-input-number
                        :step="1"
                        :min="0"
                        :max="100"
                        v-model="networkReorderForm.correlation"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间浮动值(ms)" prop="offset">
                      <el-input v-model="networkReorderForm.offset" clearable />
                    </el-form-item>
                    <el-form-item label="立即发送百分比" prop="percent">
                      <!-- <el-input
                        v-model="networkReorderForm.percent"
                        placeholder="取值是不带%号的正整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="networkReorderForm.percent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间(ms)" prop="time">
                      <el-input v-model="networkReorderForm.time" clearable />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkReorderForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData(
                            'networkReorderFormRef',
                            networkReorderForm,
                            5
                          )
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="网络包重复故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkDuplicateFormRef"
                    :model="networkDuplicateForm"
                    :rules="networkDuplicateRules"
                  >
                    <el-form-item label="目标IP" prop="destinationIp">
                      <el-input
                        v-model="networkDuplicateForm.destinationIp"
                        placeholder="例如：192.168.1.0"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除端口" prop="excludePort">
                      <el-input
                        v-model="networkDuplicateForm.excludePort"
                        placeholder="例如：22,8000 或者 8000-8010"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="排除IP" prop="excludeIp">
                      <el-input
                        v-model="networkDuplicateForm.excludeIp"
                        placeholder="例如：192.168.1.1"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="网卡设备" prop="networkCard">
                      <el-select
                        v-model="networkDuplicateForm.networkCard"
                        placeholder="请选择"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in interface_list"
                          :key="index"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="本地端口" prop="localPort">
                      <el-input
                        v-model="networkDuplicateForm.localPort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="延迟时间浮动值(ms)" prop="offset">
                      <el-input
                        v-model="networkDuplicateForm.offset"
                        clearable
                      />
                    </el-form-item>

                    <el-form-item label="包重复百分比" prop="percent">
                      <!-- <el-input
                        v-model="networkDuplicateForm.percent"
                        placeholder="取值是不带%号的正整数"
                        clearable
                      /> -->
                      <el-input-number
                        :precision="0"
                        :step="1"
                        :min="1"
                        :max="100"
                        v-model="networkDuplicateForm.percent"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="远程端口" prop="remotePort">
                      <el-input
                        v-model="networkDuplicateForm.remotePort"
                        placeholder="例如：80,8000-8080"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkDuplicateForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData(
                            'networkDuplicateFormRef',
                            networkDuplicateForm,
                            6
                          )
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="本地端口占用故障注入">
              <div class="card-item">
                <div class="network_form_fault">
                  <el-form
                    :inline="true"
                    label-width="180px"
                    ref="networkOccupyFormRef"
                    :model="networkOccupyForm"
                    :rules="networkOccupyRules"
                  >
                    <el-form-item label="指定被占用端口" prop="port">
                      <el-input v-model="networkOccupyForm.port" clearable />
                    </el-form-item>
                    <el-form-item prop="forceTc">
                      <el-checkbox v-model="networkOccupyForm.forceTc"
                        >强制覆盖已有的tc规则</el-checkbox
                      >
                    </el-form-item>
                    <el-form-item label="运行时长(s)" prop="timeout">
                      <el-input-number
                        :precision="0"
                        :min="0"
                        v-model="networkOccupyForm.timeout"
                        clearable
                      />
                      <span class="info">
                        <el-icon><InfoFilled /></el-icon>
                        运行时长若不设置，则默认为永久
                      </span>
                    </el-form-item>
                    <el-form-item style="width: 100%; padding: 1% 45% 0 45%">
                      <el-button
                        type="primary"
                        @click="
                          performData(
                            'networkOccupyFormRef',
                            networkOccupyForm,
                            7
                          )
                        "
                        >执 行</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col class="card-box">
        <el-card>
          <template #header><span>网络监控信息</span></template>
          <networkView :tableOperate="false" :ip="selectIP"></networkView>
        </el-card>
      </el-col>
      <el-col class="card-box">
        <el-card>
          <template #header><span>故障执行列表</span></template>
          <div class="execute-list">
            <ul class="infinite-list" style="overflow: auto">
              <li
                v-for="(item, index) in executeList"
                :key="index"
                v-show="item.status !== 0"
                class="infinite-list-item"
              >
                <span>{{ index + 1 }}</span>
                <span>IP：{{ item.ip }}</span>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="item.info"
                  placement="top-start"
                  ><span>{{ item.choasType }}</span>
                </el-tooltip>
                <span>{{ item.starttime }}</span>
                <el-button
                  :disabled="item.status === 2"
                  type="primary"
                  @click="stopData(item)"
                  >停止</el-button
                >
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  onlineHost,
  networkDelayFaultInject,
  networkDNSFaultInject,
  networkLossFaultInject,
  networkCorruptFaultInject,
  networkReorderFaultInject,
  networkDuplicateFaultInject,
  networkOccupyFaultInject,
  networkStop,
  networkFaultInjectResult,
  interfaceList,
} from "@/api/injection";
import networkView from "../../monitor/network/index.vue";
import { ElLoading } from "element-plus";
import { reactive } from "vue";
const { proxy } = getCurrentInstance();
const ip_list = ref([]); //主机地址list
const interface_list = ref([]);
let selectIP = ref("");
let networkRules = reactive({
  ip: [{ required: true, message: "主机地址不能为空", trigger: "blur" }],
});
let networkDelayForm = reactive({
  destinationIp: "",
  excludePort: "",
  excludeIp: "",
  networkCard: "",
  localPort: "",
  offset: "",
  remotePort: "",
  time: "",
  timeout: "",
});
let networkDelayRules = reactive({
  networkCard: [
    { required: true, message: "网卡设备不能为空", trigger: "blur" },
  ],
  time: [{ required: true, message: "延迟时间不能为空", trigger: "blur" }],
});
let networkDnsForm = reactive({
  domain: "",
  mappingIp: "",
  timeout: "",
});
let networkDnsRules = reactive({
  domain: [{ required: true, message: "域名不能为空", trigger: "blur" }],
  mappingIp: [{ required: true, message: "映射的IP不能为空", trigger: "blur" }],
});
let networkLossForm = reactive({
  destinationIp: "",
  excludePort: "",
  excludeIp: "",
  networkCard: "",
  localPort: "",
  percent: "",
  remotePort: "",
  time: "",
  timeout: "",
});
let networkLossRules = reactive({
  networkCard: [
    { required: true, message: "网卡设备不能为空", trigger: "blur" },
  ],
  percent: [{ required: true, message: "丢包百分比不能为空", trigger: "blur" }],
});
let networkCorruptForm = reactive({
  destinationIp: "",
  excludePort: "",
  excludeIp: "",
  networkCard: "",
  localPort: "",
  percent: "",
  remotePort: "",
  time: "",
  timeout: "",
});
let networkCorruptRules = reactive({
  networkCard: [
    { required: true, message: "网卡设备不能为空", trigger: "blur" },
  ],
  percent: [
    { required: true, message: "包损坏百分比不能为空", trigger: "blur" },
  ],
});
let networkReorderForm = reactive({
  destinationIp: "",
  excludePort: "",
  excludeIp: "",
  networkCard: "",
  localPort: "",
  offset: "",
  remotePort: "",
  correlation: "",
  gap: "",
  percent: "",
  time: "",
  timeout: "",
});
let networkReorderRules = reactive({
  networkCard: [
    { required: true, message: "网卡设备不能为空", trigger: "blur" },
  ],
  correlation: [
    { required: true, message: "和上一包的相关性不能为空", trigger: "blur" },
  ],
  percent: [
    { required: true, message: "立即发送百分比不能为空", trigger: "blur" },
  ],
});
let networkDuplicateForm = reactive({
  destinationIp: "",
  excludePort: "",
  excludeIp: "",
  networkCard: "",
  localPort: "",
  offset: "",
  percent: "",
  timeout: "",
});
let networkDuplicateRules = reactive({
  networkCard: [
    { required: true, message: "网卡设备不能为空", trigger: "blur" },
  ],
});
let networkOccupyForm = reactive({
  port: "",
  forceTc: "",
  timeout: "",
});
let networkOccupyRules = reactive({
  port: [
    { required: true, message: "指定被占用的端口不能为空", trigger: "blur" },
  ],
});
let executeList = ref([]);

//获取网卡设备列表
watch(selectIP, (newVal, oldValue) => {
  getExecuteList();
  getinterface(newVal);
});
function getinterface(val) {
  interfaceList({ ip: val }).then((response) => {
    interface_list.value = response.data;
  });
}

//获取主机地址表
function getOnlineHost() {
  onlineHost().then((response) => {
    ip_list.value = response.data;
  });
}

//获取执行列表
function getExecuteList() {
  networkFaultInjectResult({ ip: selectIP.value }).then((response) => {
    executeList.value = response.data;
  });
}

//执行
function performData(formName, form, code) {
  if (selectIP.value) {
    const loading = ElLoading.service({
      lock: true,
      text: "正在执行，请稍后...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    proxy.$refs[formName].validate((valid) => {
      if (valid) {
        form.ip = selectIP;
        if (form.timeout === 0) {
          form.timeout = "";
        }
        switch (code) {
          //网络延迟故障注入
          case 1:
            networkDelayFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkDelayFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //篡改DNS域名解析
          case 2:
            networkDNSFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkDnsFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //网络丢包故障注入
          case 3:
            networkLossFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkLossFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //网络包损坏故障注入
          case 4:
            networkCorruptFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkCorruptFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //网络包乱序故障注入
          case 5:
            networkReorderFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkReorderFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //网络包重复故障注入
          case 6:
            networkDuplicateFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkDuplicateFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          //本地端口占用故障注入
          case 7:
            networkOccupyFaultInject(form)
              .then((response) => {
                if (response.data.executeResult.success === true) {
                  loading.close();
                  proxy.resetForm("networkOccupyFormRef");
                  proxy.$modal.msgSuccess("执行成功");
                  getExecuteList();
                } else {
                  loading.close();
                  proxy.$message({
                    type: "error",
                    message: response.data.executeResult.info,
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            break;
        }
      } else {
        loading.close();
        console.log("error submit!!");
        return false;
      }
    });
  } else {
    proxy.$modal.msgError("主机地址不能为空");
  }
}

//停止
function stopData(form) {
  const loading = ElLoading.service({
    lock: true,
    text: "正在执行，请稍后...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  const params = {
    uuid: form.uuid,
    ip: form.ip,
    result: form.result,
  };
  networkStop(params)
    .then((response) => {
      if (response.data.executeResult.success === true) {
        loading.close();
        proxy.$modal.msgSuccess("已停止执行");
        getExecuteList();
      } else {
        loading.close();
        proxy.$message({
          type: "error",
          message: response.data.executeResult.info,
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
getOnlineHost();
getExecuteList();
</script>

<style scoped>
.hostres_wrap .card-item {
  border-right: none !important;
}
.network_form {
  display: flex;
  flex-flow: wrap;
}
.network_form .el-form-item__content .el-select,
.network_form .el-form-item__content .el-input {
  width: 80%;
}
.network_form .el-form-item__content .el-select .el-input {
  width: 100%;
}
.card-item {
  /* width: 50%; */
}
.network_form_fault .el-form-item__label {
  font-weight: normal;
}
.hostres_block {
  border: 1px solid #f2f2f2;
  margin-top: 20px;
}
.hostres_item {
  border-bottom: 1px solid #f2f2f2;
  display: flex;
}
.hostres_item:last-child {
  border-bottom: none;
}
.hostres_item .hostres_name {
  font-size: 16px;
  font-weight: bold;
  line-height: 36px;
  margin: 0;
}
.hostres_item .el-form-item__label {
  width: 190px;
  text-align: right;
  font-weight: normal;
}
.hostres_item_left {
  width: 60%;
  border-right: 1px solid #f2f2f2;
  box-sizing: border-box;
  padding-left: 10px;
  position: relative;
}
.hostres_item_btn {
  width: 40%;
  display: flex;
  padding-top: 34px;
  justify-content: center;
  align-items: center;
}
.hostres_item_btn button {
  width: 90px;
  height: 34px;
  line-height: 34px;
}
.hostres_item_btn button:first-child {
  margin-right: 10px;
}
.fault_prompt {
  position: absolute;
  bottom: 0;
  left: 200px;
  font-size: 12px;
  color: #f56c6c;
}

.zanwu {
  font-size: 13px;
  color: #333;
  line-height: 22px;
  margin: 0;
  padding-bottom: 100px;
}
.perform_list {
  padding: 0 0 100px;
  margin: 0;
}
.perform_list li {
  list-style: none;
  font-size: 13px;
  color: #333;
  line-height: 22px;
}
.card_percentage {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.percentage_item {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
  font-weight: bold;
  margin: 0;
}
.percentage_item span {
  display: block;
  font-size: 14px;
  line-height: 50px;
  color: #333;
}
.percentage_item_red {
  color: #d81b60;
  border: 12px solid #d81b60;
}
.percentage_item_yellow {
  color: #f4c512;
  border: 12px solid #f4c512;
}
.percentage_item_green {
  color: #55d327;
  border: 12px solid #55d327;
}
.card_total {
  width: 20%;
  font-size: 15px;
  line-height: 30px;
  padding-top: 50px;
  padding-left: 35px;
  font-weight: bold;
}
.card_total span {
  color: #d81b60;
}
.execute-list {
  width: 100%;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.info {
  font-size: 12px;
  color: #909399;
  padding-left: 5%;
  display: flex;
  align-items: center;
}
.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 32px;
  margin-top: 10px;
  width: 45%;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 40%;
}
</style>
